<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>飞马云监控平台-多屏</title>

    <link rel="stylesheet" type="text/css" href="/css/vendor/cloud-monitor-platform-multi-screen.css">
</head>
<body>

<!-- 顶部状态栏 -->
<div class="status-bar">
    <img style="position: absolute; left: 34px; top: 8px; width: 60px; max-height: 60px;" src="/images/login/login-logo.png">
    <section style="position: absolute; left: 110px; font-size: 1.2em; line-height: 60px;">云监控平台</section>

    <div class="refresh-pause" id="auto-refresh-btn" title="停止/打开 自动刷新">
        <div class="btn refresh"></div>
    </div>

    <div style="float: right;">
        <img onclick="clickLastPage()" id="last-page" class="turn-page-icon icon-rotate-180deg"
             src="/images/stat/to_firstpage_disable.png">
        <img onclick="clickNextPage()" id="next-page" class="turn-page-icon icon-rotate-180deg"
             src="/images/stat/to_prepage_disable.png">
        <section class="turn-page-text"><span style="color: #ff6602" id="cur-page">0</span><span id="total-page"
                                                                                                 style="color: rgba(255, 255, 255, 0.35);">/0</span>
        </section>
        <img id="to-pre-Page" onclick="clickPrePage()" class="turn-page-icon" src="/images/stat/to_prepage_disable.png">
        <img id="first-page" onclick="clickFistPage()" class="turn-page-icon" src="/images/stat/to_firstpage_disable.png">
    </div>

    <div style="float: right; margin-right: 46px;">
        <section class="status-bar-text" style="font-size: 2.0em;" id="current-flying">0</section>
        <section class="status-bar-text" style="font-size: 1.0em; letter-spacing: 1px; margin-right: 16px; margin-left: 8px;">正在飞行</section>
        <img class="status-bar-icon" style="" src="/images/stat/flying_count.png"/>
    </div>

</div>

<!-- 多屏 -->
<div id="multi-screen">

</div>

</body>

<!-- 加载JS脚本 -->
<script src="/js/baidu-statistics.js"></script>
<script src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/vendor/statistics/cloud-monitor-platform-multi-screen.js"></script>
<!-- 多屏动态添加 -->
<script>


    var MultiScreenProxy = {
        //上一次任务信息
        curMissionInfo: false,
        //当前的集合
        curIdArray: false,
        //当期的数量
        curLength: 0,
        maxCount: 6,
        //当前页数
        curPage: 0,
        //总共页数
        totalPage: 0,
        //当前的任务信息
        curMissionData: false,
        //计时器
        timer: false,

        init: function () {
            this._requestFlyingCount();
            this.requestFlyingCountWithTimer();
            this.bindRefreshBtn();
        },
        /**
         *
         * 定时30秒请求一次
         */
        requestFlyingCountWithTimer: function () {
            this.timer = setInterval(function () {
                MultiScreenProxy._requestFlyingCount();
            }, 30000);
        },
        /**
         *
         * 停止定时刷新
         */
        pauseRefreshRequest: function () {
            clearInterval(this.timer);
        },
        bindRefreshBtn: function () {
            $("#auto-refresh-btn").click(function () {
                var child = $(this).children().eq(0);
                if (child.hasClass("refresh")){
                    child.removeClass("refresh");
                    child.addClass("pause");
                    $(this).css("background-color", "initial");
                    MultiScreenProxy.pauseRefreshRequest();
                }else {
                    child.removeClass("pause");
                    child.addClass("refresh");
                    $(this).css("background-color", "#3a3a3a");
                    MultiScreenProxy.requestFlyingCountWithTimer();
                }
            });
        },
        /**
         * 读取数据
         * @param array
         */
        loadingData: function (array) {
            this.curIdArray = new Array();
            this.curMissionData = array;
            MultiScreenProxy.curLength = 0;
            $("#multi-screen").html("");

            this.totalPage = parseInt((array.length + this.maxCount - 1) / this.maxCount);
            if(this.totalPage==0){
                this.totalPage=1;
            }
            this.changePage(1);
        },
        changePage: function (page) {
            var array = this.curMissionData;
            if (page <= this.totalPage) {
                this.curPage = page;
                $("#cur-page").text(this.curPage + "");
                $("#total-page").text("/" + this.totalPage);
                var prePage=$("#to-pre-Page");
                if (this.totalPage <= 1) {
                    //可用

                    $("#first-page").attr("src", "/images/stat/to_firstpage_disable.png");
                    $("#to-pre-Page").attr("src", "/images/stat/to_prepage_disable.png");
                    $("#last-page").attr("src", "/images/stat/to_firstpage_disable.png");
                    $("#next-page").attr("src", "/images/stat/to_prepage_disable.png");
                } else {

                    if(this.curPage<=1){
                        $("#first-page").attr("src", "/images/stat/to_firstpage_disable.png");
                        $("#to-pre-Page").attr("src", "/images/stat/to_prepage_disable.png");
                    }else{
                        $("#first-page").attr("src", "/images/stat/to_firstpage_enable.png");
                        $("#to-pre-Page").attr("src", "/images/stat/to_prepage_enable.png");
                    }
                    if(this.curPage==this.totalPage){
                        $("#last-page").attr("src", "/images/stat/to_firstpage_disable.png");
                        $("#next-page").attr("src", "/images/stat/to_prepage_disable.png");
                    }else{
                        $("#last-page").attr("src", "/images/stat/to_firstpage_enable.png");
                        $("#next-page").attr("src", "/images/stat/to_prepage_enable.png");
                    }

                    if (this.curPage == 1) {

                    } else if (this.curPage > 1) {

                    } else {
                        if (this.curPage == this.totalPage) {

                        }
                    }
                }
                var iframeHtml = "";
                var fillIndex = 0;
                for (; fillIndex < this.maxCount; fillIndex++) {
                    var index = (this.curPage - 1) * this.maxCount + fillIndex;
                    if (index >= array.length) {
                        break;
                    }
                    var item = array[index];
                    iframeHtml += MultiScreenProxy._createIframeString(item, fillIndex);
                    MultiScreenProxy.curLength++;
                }
                if (fillIndex < this.maxCount) {
                    for (var i = fillIndex; i < this.maxCount; i++) {
                        var item = {
                            id: "",
                            enable: 0
                        };
                        iframeHtml += MultiScreenProxy._createIframeString(item, i);
                    }
                }
                $("#multi-screen").html(iframeHtml);
            }
        },
        _createIframeString: function (item, i) {
            var idString = item["id"];
            var enable = item["enable"];
            this.curIdArray[idString] = item;
            var marginRight = ((i + 1) % 3 == 0) ? "0px" : "0.6%";
            var marginTop = (i > 2) ? "0.6%" : "0px";
            //var enable = (i % 2 == 0) ? 0 : 1;
            var urlString = "src='/stat/subScreen?index=" + i + "&enable=" + enable + "&mission=" + idString + "'";
            return "<iframe " + urlString + " style='border:0px; width: 32.933%; height: 49.5%; float: left; margin-right: " + marginRight + "; margin-top: " + marginTop + ";'></iframe>";
        },
        /**
         * 请求飞行中的次数
         * @private
         */
        _requestFlyingCount: function () {

            $.get("/monitor/requestFlightingCount", [], function (result) {

                var total = 0;
                if (result && result.status == 0) {
                    total = result.data.length;
                    var isNeedUpdate = true;
                    if (MultiScreenProxy.curIdArray) {
                        if (MultiScreenProxy.curLength == total) {
                            var tempIsNeedUpdate = false;
                            for (var i = 0; i < result.data.length; i++) {
                                var item = result.data[i];
                                var idString = item["id"];
                                if (!MultiScreenProxy.curIdArray[idString]) {
                                    tempIsNeedUpdate = true;
                                }
                            }
                            isNeedUpdate = tempIsNeedUpdate;
                        }
                    }
                    if (isNeedUpdate) {
                        MultiScreenProxy.loadingData(result.data);
                    }
                }
                $("#current-flying").text(total);

            });
        }
    };

    $(function () {
        MultiScreenProxy.init();
    });


    function clickFistPage() {
        if (MultiScreenProxy.curPage > 1) {
            MultiScreenProxy.changePage(1);
        }
    }
    function clickPrePage() {
        if (MultiScreenProxy.curPage > 1) {
            MultiScreenProxy.changePage((MultiScreenProxy.curPage - 1));
        }
    }
    function clickNextPage() {
        if (MultiScreenProxy.curPage < MultiScreenProxy.totalPage) {
            MultiScreenProxy.changePage((MultiScreenProxy.curPage + 1));
        }
    }
    function clickLastPage() {
        if (MultiScreenProxy.curPage < MultiScreenProxy.totalPage) {
            MultiScreenProxy.changePage((MultiScreenProxy.totalPage));
        }
    }

</script>

</html>










